<!--
 * @Author: xiazhi
 * @Date: 2025-02-26 14:23:41
 * 鸿蒙原生需求嵌入webview、文章详情
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <!-- <meta name="keywords" content="鸿蒙app、详情页、文章信息、展示文章" />
    <meta name="description" content="鸿蒙app-详情页" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style>
        /* 默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 让元素的内边距和边框包含在宽度和高度内 */
            font-family: 'SourceHanSansSC-Regular'; /* 选择一个通用、易读的字体族 */
        }

        h1 {
            font-size: 36px;
            font-weight: 700; /* 加粗字体 */
            margin: 40px 0 20px 0;
            color: #222;
            text-align: center; /* 标题居中显示 */
            letter-spacing: 1px; /* 字母间距 */
        }
        h2 {
            font-size: 30px;
            font-weight: 600;
            margin: 32px 0 16px 0;
            color: #222;
            border-bottom: 1px solid #ccc; /* 底部添加分隔线 */
            padding-bottom: 8px; /* 分隔线与文字的间距 */
        }
        h3 {
            font-size: 24px;
            font-weight: 600;
            margin: 28px 0 12px 0;
            color: #222;
        }
        h4 {
            font-size: 20px;
            font-weight: 600;
            margin: 24px 0 10px 0;
            color: #222;
        }
        h5 {
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0 8px 0;
            color: #222;
        }
        h6 {
            font-size: 16px;
            font-weight: 600;
            margin: 16px 0 6px 0;
            color: #222;
        }
        
        p {
            font-size: 12px; /* 段落字体大小 */
            line-height: 20px; /* 行高 */
            margin: 0; /*  外边距 */
            color: #999999; /* 文本颜色 */
            text-align: left; /* 左对齐 */
            font-weight: 400; /* 粗细 */ 
            font-style: normal; /* 倾斜 */
            word-wrap: break-word; /* 自动换行 */
        }

        strong {
            font-weight: bold;
            color: #111;
        }

        em {
            font-style: italic;
            color: #555;
        }
        
        u {
            text-decoration: underline;
            text-decoration-color: #007BFF; /* 下划线颜色 */
        }

        ul {
            list-style-type: disc; /* 列表项符号为实心圆 */
            margin: 0 0 20px 25px;
            padding: 0;
        }

        ul li {
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 8px;
        }
        ol {
            list-style-type: decimal; /* 列表项符号为数字 */
            margin: 0 0 20px 25px;
            padding: 0;
        }

        ol li {
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 8px;
        }

        blockquote {
            background-color: #f9f9f9; /* 背景颜色 */
            border-left: 4px solid #007BFF; /* 左侧边框 */
            padding: 15px 20px;
            margin: 20px 0;
            font-style: italic;
            color: #666;
        }

        table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            margin: 20px 0;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px 15px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2; /* 表头背景颜色 */
            font-weight: 600;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
            border: 0;
            border-radius: 8px;
        }

        a {
            color: #007BFF;
            text-decoration: none;
            transition: color 0.2s ease; /* 颜色过渡效果 */
        }

        a:hover {
            color: #0056b3;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="hmApp_detail_content" id="hmAppDetailContent"></div>
    <script>
        // (function(){
        //     let content = "<p><strong>《哪吒之魔童闹海》</strong>全球票房突破<em>139亿</em>！</p >\n<p><img src=\"https://pics1.baidu.com/feed/d788d43f8794a4c231e39208df0e6fdaaf6e39de.jpeg@f_auto?token=aa55704e525019229b2cd38835b627f7\" alt=\"\" width=\"690\" height=\"965\"></p >";
        //     this.receiveData(content);
        // })()

        function receiveData(data) {
            // 获取内容容器
            const contentDiv = document.getElementById('hmAppDetailContent');
            console.log('data111===>', data,contentDiv);
            // 将接收到的数据插入到容器中
            contentDiv.innerHTML = data;
        }
    </script>
</body>
</html>